<template>
  <div class="mvdetail">
    <div class="container w">
      <div class="left">
        <!-- mv视频 -->
        <div class="video">
          <video
            style="width: 100%; height: 450px;"
            :src="Mvurl"
            controls
            autoplay="autoplay"
          ></video>
        </div>
        <!-- Mv信息 -->
        <div class="text">
          <!-- name -->
          <div class="name">
            <i class="el-icon-video-camera-solid"></i>
            {{ MVdetail.artistName }}
          </div>
          <!-- 标签 -->
          <div class="tags">
            <span v-for="(item, index) in MVdetail.videoGroup" :key="index">
              #{{ item.name }}</span
            >
          </div>
          <!-- 发布时间,播放次数 -->
          <div class="time">
            <span>发布：{{ MVdetail.publishTime }}</span>
            <span>播放次数：1122</span>
          </div>

          <!-- 点赞，分享，收藏 -->
          <div class="features">
            <span class="el-icon-thumb">15</span>
            <span class="el-icon-star-off">20</span>
            <span class="el-icon-share">25</span>
          </div>

          <!-- 评论 -->

          <div class="Comments">
            <i class="el-icon-chat-dot-square"></i>
            <span>Comments</span>
            <span>|&nbsp;{{ MVdetail.commentCount }}条评论</span>
          </div>
        </div>

        <!-- 评论 -->

        <div class="pl">
          <h3>最新评论</h3>
          <ul class="box">
            <!-- 热门评论 -->
            <li v-for="item in hotMvcomment" :key="item.id">
              <div class="pic">
                <img :src="item.user.avatarUrl" alt="" />
              </div>
              <div class="texts">
                <div class="top">
                  <div class="left">
                    <span class="name">{{ item.user.nickname }}</span>
                    <span class="time">{{ item.time }}前</span>
                  </div>
                  <div class="right">
                    <span class="el-icon-mouse">( {{ item.likedCount }} )</span>
                    <span class="el-icon-chat-dot-round"></span>
                  </div>
                </div>
                <div class="bottom">{{ item.content }}</div>
              </div>
            </li>
            <!-- 评论 -->
            <li v-for="(item, index) in Mvcomment" :key="index">
              <div class="pic">
                <img :src="item.user.avatarUrl" alt="" />
              </div>
              <div class="texts">
                <div class="top">
                  <div class="left">
                    <span class="name">{{ item.user.nickname }}</span>
                    <span class="time">{{ item.time }}前</span>
                  </div>
                  <div class="right">
                    <span class="el-icon-mouse">( {{ item.likedCount }} )</span>
                    <span class="el-icon-chat-dot-round"></span>
                  </div>
                </div>
                <div class="bottom">{{ item.content }}</div>
              </div>
            </li>
          </ul>
        </div>
      </div>

      <div class="right">
        <!-- 视频简介 -->
        <div class="BWL">
          <div class="head">视频简介</div>
          <div class="box">{{ MVdetail.desc }}</div>
        </div>

        <!-- 相关推荐 -->
        <div class="MORE">
          <div class="head">相关推荐</div>
          <ul class="box">
            <li
              v-for="(item, index) in SimilarMV"
              :key="index"
              @click="change(item.id)"
            >
              <div class="pic">
                <img :src="item.cover" alt="" />
                <i class="el-icon-video-play"></i>
              </div>
              <div class="singname">
                <i class="el-icon-video-camera-solid"></i> {{ item.name }}
              </div>
              <div class="name">By. {{ item.artistName }}</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { MVdetail, Mvurl, Mvcomment, SimilarMV } from "../../../network/index";
export default {
  name: "mvdetail",
  components: {
    MVdetail,
    Mvurl,
    Mvcomment,
    SimilarMV,
  },
  data() {
    return {
      MVdetailid: "",
      MVdetail: [],
      Mvurl: "",
      Mvcomment: [],
      SimilarMV: [],
      hotMvcomment: [],
    };
  },
  created() {
    // 接受首页跳转时传过来的歌单id
    this.MVdetailid = this.$route.query.id;
    // 获取mv信息
    MVdetail(this.MVdetailid).then((res) => {
      if (res.data.code == "200") {
        this.MVdetail = res.data.data;
        // console.log(this.MVdetail);
      }
    });
    // 获取视频地址
    Mvurl(this.MVdetailid).then((res) => {
      if (res.data.code == "200") {
        this.Mvurl = res.data.data.url;
        // console.log(this.Mvurl);
      }
    });

    // 获取评论
    Mvcomment(this.MVdetailid).then((res) => {
      // console.log(res);
      if (res.data.code == "200") {
        this.Mvcomment = res.data.comments;
        this.hotMvcomment = res.data.hotComments;
      }
    });

    // 获取相似MV
    SimilarMV(this.MVdetailid).then((res) => {
      // console.log(res);
      if (res.data.code == "200") {
        this.SimilarMV = res.data.mvs;
      }
    });
  },
  // 监听路由参数变化，变化后刷新页面
  watch: {
    $route(to, from) {
      //监听路由是否变化
      if (to.query.id != from.query.id) {
        this.id = to.query.id;
        this.init(); //重新加载数据
      }
    },
  },
  methods: {
    change(id) {
      this.$router.push({
        path: "/mvdetail", //跳转的路径
        query: {
          //路由传参时push和query搭配使用 ，作用时传递参数
          id: id,
        },
      });
      location.reload();
    },
  },
  mounted() {
    // 切换页面时滚动条自动滚动到顶部
    window.scrollTo(0, 0);
  },
};
</script>

<style lang="less" scoped>
.mvdetail {
  .container {
    margin-top: 120px;
    display: flex;
    padding: 10px;
    justify-content: space-between;

    .left {
      width: 69%;
      background-color: #fff;
      padding: 10px;
      border-radius: 10px;
      margin-right: 15px;
      .text {
        padding: 20px 0;
        border-bottom: 1px solid #666;
        .name {
          margin-bottom: 15px;
          font-size: 18px;
          font-weight: 700;
          i {
            color: #fa2800;
          }
        }
        .tags {
          margin-bottom: 15px;
          span {
            padding: 0 10px 0 0;
            font-size: 14px;
            color: #fa2800;
          }
        }
        .time {
          margin-bottom: 15px;
          font-size: 14px;
        }
        .features {
          margin-bottom: 15px;
          span {
            padding: 10px 15px;
            background-color: #eee;
            margin-right: 10px;
            border-radius: 10px;
            font-size: 14px;
          }
        }
        .Comments {
          font-size: 14px;
          span {
            padding-left: 10px;
          }
        }
      }
      .pl {
        margin-top: 20px;
        width: 100%;
        h3 {
          font-size: 15px;
        }
        .box {
          margin-top: 20px;
          display: flex;
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          li {
            display: flex;
            width: 100%;

            align-items: center;
            margin-bottom: 20px;
            .pic {
              width: 70px;
              height: 45px;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .texts {
              width: 1155px;

              .top {
                display: flex;
                justify-content: space-between;
                align-items: center;
                .left {
                  display: flex;
                  width: 95%;
                  span {
                    padding: 0 10px;
                  }
                  .name {
                    font-size: 14px;
                  }
                }
                .right {
                  width: 16%;
                  display: flex;
                  justify-content: center;
                  span {
                    padding: 5px;
                    font-size: 14px;
                    text-align: center;
                  }
                }
              }
              .bottom {
                background-color: #f5f5f5;
                margin-left: 20px;
                padding: 10px 5px;
              }
            }
          }
        }
      }
    }
    .right {
      width: 350px;
      .BWL {
        background-color: #fff;
        border-radius: 20px;
        padding: 15px;
        margin-bottom: 15px;
        .head {
          border-left: 3px solid #fa2800;
          padding-left: 1rem;
          font-size: 16px;
          font-weight: 700;
          margin-bottom: 10px;
        }
        .box {
          font-size: 13px;
          font-weight: 500;
          line-height: 20px;
          font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
        }
      }
      .MORE {
        background-color: #fff;
        border-radius: 20px;
        padding: 15px;
        .head {
          border-left: 3px solid #fa2800;
          padding-left: 1rem;
          font-size: 16px;
          font-weight: 700;
          margin-bottom: 10px;
        }
        .box {
          li {
            margin-bottom: 15px;
            .pic {
              width: 100%;
              position: relative;
              img {
                width: 100%;
              }
              i {
                position: absolute;
                top: 42%;
                left: 45%;
                color: #fa2800;
                font-size: 36px;
              }
              .el-icon-video-play {
                display: none;
              }
            }
            .singname {
              margin-top: 10px;
              margin-bottom: 10px;
              font-size: 16px;
              .el-icon-video-camera-solid {
                color: #fa2800;
              }
            }
            .name {
              color: #a5a5c1;
            }
          }
          li .pic:hover .el-icon-video-play {
            display: block !important;
          }
        }
      }
    }
  }
}
</style>
